<template>
  <el-dialog
    v-dialogDrag
    v-loading="loading"
    append-to-body
    top="6vh"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    :title="'查看'"
    :visible.sync="isVisible"
  >
      <el-card
        style="margin-bottom:5px;"
        shadow="hover"
      >
        <el-row :gutter="20">
            <el-col :span="24"><div class="text item">运动目标：{{data.sportTarget}}</div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24"><div class="text item">运动形式：{{data.sportProject}}</div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24"><div class="text item">运动方案：</div>
            <div class="text item_inner"
            v-for="(sportPrescription,sIndex) in data.list"
            :key="sIndex">
                  第{{sIndex+1}}阶段：每次心率: {{sportPrescription.sportHr}}，每次时长：{{sportPrescription.sportDuration}}分钟，
                  每周频率：{{sportPrescription.sportRate}}次，共{{sportPrescription.sportWeek}}周
            </div> 
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24"><div class="text item">注意事项：{{data.note}}</div></el-col>
          </el-row>
      </el-card>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="isVisible = false"
      >关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import '@/utils/directives.js'
  import { getScreenWidth } from '@/utils'
  export default {
    components: {  },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
    },
    data () {
      return {
        dataForm: this.initDataForm(),
        data: {},
        loading: false,
        width: getScreenWidth(),
        dataRule: {
        }
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
          this.reset()
        }
      },
      title() {
        return this.$t('common.' + this.type)
      }
    },
    watch: {},
    mounted () {
      window.onresize = () => {
        return (() => {
          this.width = getScreenWidth()
        })()
      }
    },
    methods: {
      initDataForm() {
        return {
          id: '',
          sportProject: '',
          sportDuration: '',
          sportFrequency: '',
          sportIntensity: '',
          startSportIndicators: '',
          afterSportIndicators: '',
          prescriptionCreateTime: '',
          sportTestEndTime: '',
          status: ''
        }
      },
      setData(id) {
        this.$http({
          url: this.$http.requestUrl('/sport/prescriptionapi/query/check'),
          method: 'get',
          params: {id: id}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.data = data.info ? data.info : {};
          }
        })
      },
      setDataForm(val) {
        if (val) {
          this.dataForm = { ...val }
          this.setData(this.dataForm.spPrescriptionApiId);
        }
      },
      close() {
        this.$emit('close')
      },
      reset() {
        // 先清除校验，再清除表单
        this.$refs.dataForm.clearValidate()
        this.$refs.dataForm.resetFields()
        this.dataForm = this.initDataForm()
      }
    }
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }
  .item {
    padding: 12px 2px;
    word-break: break-all;
    overflow: auto;
    /* border-radius: 4px;
    border: 1px solid #ebeef5; */
    border-top: 1px solid #ebeef5;
  }
  .item_inner {
    padding: 8px 2px;
    word-break: break-all;
    overflow: auto;
    /* border-radius: 4px;
    border: 1px solid #ebeef5; */
  }
  /* .inline-radio span {
    float: right;
  } */
</style>